<template>
    <div class="song">
      <SongInfo :song="song"></SongInfo>
      <div class="songDetail_about clearfix">
        <div class="lyrics">
          <div class="lyrics_title">
            <span>歌词</span>
            <span class="iconfont icon-wenben"></span>
          </div>
          <ul class="lyrics_content" ref="lyric">
              <li v-for="(line,index) in lyric.lines">{{line.text}}</li>
          </ul>
          <div class="lyrics_opt" @click="optLyric">{{opt}}</div>
        </div>
        <div class="about_info">
          <div class="hotsongList" v-if="song_gedan.length">
            <div class="title">相关热门歌单</div>
            <ul class="list_ul">
              <li v-for="(item,index) in song_gedan">
                <div class="img">
                  <img :src="item.gedan_pic" alt="">
                </div>
                <div class="content">{{item.gedan_title}}</div>
                <div class="name">{{item.gedan_name}}</div>
              </li>
            </ul>
          </div>
          <div class="mv" v-if="song_mv.length">
            <div class="title">相关MV</div>
            <div class="content" v-for="(item,index) in song_mv" >
              <div class="img" @click="toMvDetail(item.mv_mid)">
                <img :src="item.mv_pic" alt="">
                <div class="icon">
                  <span class="iconfont icon-bofang1"></span>
                </div>
              </div>
              <div class="songName" @click="toMvDetail(item.mv_mid)">{{item.mv_title}}</div>
              <div class="singer">
                <span v-for="(singer,index) in item.singers" @click="toSingerDetail(singer.mid)">
                  {{singer.name}}
                  <span>{{index!==item.singers.length-1?'/':''}}</span>
                </span>
              </div>
            </div>

          </div>
        </div>
      </div>

    </div>
</template>

<script>
    import SongInfo from '@/components/Info/SongInfo/SongInfo'
    import {mapState} from 'vuex'
    export default {
        name: "SongDetail",
        data(){
          return{
            lyric:{
              lines:[]
            },
            opt:'[展开]',
            song_gedan:[],
            song_mv:[]
          }
        },
        methods:{
          optLyric(){
            if(this.opt==='[展开]'){
              this.opt='[收起]'
              this.$refs.lyric.style.overflow='inherit';
              console.log(this.$refs.lyric.scrollHeight);
              this.$refs.lyric.style.height=this.$refs.lyric.scrollHeight+'px';
            }else{
              this.opt='[展开]'
              this.$refs.lyric.style.overflow='hidden';
              this.$refs.lyric.style.height='416px';
            }
          },
          toSingerDetail(mid){
            this.$router.replace(`/singerdetail/${mid}`);
            location.reload();
          },
          toMvDetail(mid){
            this.$router.replace('/mvdetail/'+mid)
          },
        },
        mounted(){
          this.$store.dispatch('getSongDetail',{song_mid:this.$route.query.song_mid,song_id:this.$route.query.song_id})
          this.$store.dispatch('getSongLyric',this.$route.query.song_mid)
        },
        computed:{
          ...mapState(['song','songLyric'])
        },
        watch:{
          songLyric(value){
            this.lyric.lines=value.lines;
          },
          song(value){
            this.song_gedan=value.song_gedan;
            this.song_mv=value.song_mv;
          }
        },
        components:{
          SongInfo
        },

    }
</script>

<style scoped lang="less">
  .song .songDetail_about{width: 1200px;margin: 0px auto 50px;}
  .song .songDetail_about .lyrics{display:inline-block ;font-size: 14px}
  .song .songDetail_about .lyrics .lyrics_title{margin: 20px 0px;}
  .song .songDetail_about .lyrics .lyrics_title>span:first-child{font-size: 19px}
  .song .songDetail_about .lyrics .lyrics_content{height: 416px;overflow: hidden;line-height: 2}
  .song .songDetail_about .lyrics .lyrics_opt{color:#31c27c;cursor: pointer }
  .song .songDetail_about .about_info{float: right;}
  .song .songDetail_about .about_info .title{margin: 20px 0px;font-size: 19px}
  .song .songDetail_about .about_info .hotsongList .list_ul{width: 290px}
  .song .songDetail_about .about_info .hotsongList .list_ul li{display: inline-block;margin-right: 14px;width: 84px}
  .song .songDetail_about .about_info .hotsongList .list_ul li:last-child{margin-right: 0px}
  .song .songDetail_about .about_info .hotsongList .list_ul li .img{width: 84px;height: 84px;}
  .song .songDetail_about .about_info .hotsongList .list_ul li .img img{width: 84px;height: 84px;cursor: pointer}
  .song .songDetail_about .about_info .hotsongList .list_ul li .content{margin: 3px 0px}
  .song .songDetail_about .about_info .hotsongList .list_ul li .content:hover{color: #31c27c;cursor: pointer}
  .song .songDetail_about .about_info .hotsongList .list_ul li .name{color: #999}
  .song .songDetail_about .about_info .mv .content{margin: 10px 0px;font-size: 14px}
  .song .songDetail_about .about_info .mv .img{width: 290px;height: 158px;overflow: hidden;position: relative;}
  .song .songDetail_about .about_info .mv .img img{width: 290px;height: 158px;transition: all 0.6s;;cursor: pointer;}
  .song .songDetail_about .about_info .mv .img:hover img{transform: scale(1.2);}
  .song .songDetail_about .about_info .mv .songName{margin: 5px 0px}
  .song .songDetail_about .about_info .mv .songName:hover{color: #31c27c;cursor: pointer}
  .song .songDetail_about .about_info .mv .singer {color: #999}
  .song .songDetail_about .about_info .mv .singer >span:hover{cursor: pointer;color: #31c27c}
  .song .songDetail_about .about_info .mv .singer >span:hover >span{cursor: pointer;color: #999}
  .song .songDetail_about .about_info .mv  .img .icon{position: absolute;z-index: 1;top:0;bottom:0;left:0;right:0;margin:auto;background: white;border-radius: 50%;height:40px;width: 40px;text-align: center;line-height: 40px;opacity: 0;transition: all 1s;}
  .song .songDetail_about .about_info .mv .img:hover .icon{opacity: 1;transform: scale(1.3);}
  .song .songDetail_about .about_info .mv .img .iconfont{font-size: 25px;color: #545454;margin-left: 5px;margin-top: 3px;display: inline-block;}


</style>
